﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电瓶车客户端</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .def_color {
            color: #ffffff;
        }

        .picWH {
            width: 1.2rem;
            height: 1.2rem
        }
    </style>
</head>
<body>
    <div class="page-group" id="main_content">
        <div class="page" id="resovle_problem">
            <header class="bar bar-nav" style="background-color:black">
                <a class="icon icon-home pull-left  def_color" @click="outLogin()"></a>
                <!--back-->
                <a class="icon pull-right def_color add_btn" style="font-size: 0.8rem;color:white" @click="add_Station()">添加</a>
                <h1 class="title" style="color:white">基站信息</h1>
            </header>
            <!-- 工具栏 -->
            <nav class="bar bar-tab">
                <a class="tab-item external active" href="index_car.html">
                    <span class="icon icon-settings"></span>
                    <span class="tab-label">基站</span>
                </a>
            </nav>
            <div class="bar bar-header-secondary">
                <div class="searchbar">
                    <a class="searchbar-cancel">取消</a>
                    <div class="search-input">
                        <label class="icon icon-search" for="search" @click="loadinfo(1)"></label>
                        <input type="search" id='search' placeholder='请输入基站编号、名称等' v-model="searchText" />
                    </div>
                </div>
            </div>
            <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-ptr-distance="55" data-distance="100">
                <!-- 默认的下拉刷新层 -->
                <div class="pull-to-refresh-layer">
                    <div class="preloader"></div>
                    <div class="pull-to-refresh-arrow"></div>
                </div>
                <template v-if="StationInfo">
                    <div class="list-block" id="container">
                        <ul style="margin-top:1rem" v-for="(item,index) in StationInfo">
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">基站ID</div>
                                    <div class="item-after">{{item.base_station_id}}</div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">基站名称</div>
                                    <div class="item-after">{{item.base_station_name}}</div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">经度</div>
                                    <div class="item-after">{{item.lat}}</div>
                                </div>
                            </li>

                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">纬度</div>
                                    <div class="item-after">{{item.lng}}</div>
                                </div>
                            </li>

                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">基站地址</div>
                                    <div class="item-after">{{item.base_station_address}}</div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">基站状态</div>
                                    <div class="item-after">
                                        <template v-if="item.base_station_state==0">
                                            正常
                                        </template>
                                        <template v-if="item.base_station_state==1">
                                            异常
                                        </template>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">电源状态</div>
                                    <div class="item-after">
                                        <template v-if="item.source_state==0">
                                            正常
                                        </template>
                                        <template v-if="item.source_state==1">
                                            异常
                                        </template>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">外接电源</div>
                                    <div class="item-after">
                                        <template v-if="item.apart_state==0">
                                            正常
                                        </template>
                                        <template v-if="item.apart_state==1">
                                            异常
                                        </template>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">最后更新时间</div>
                                    <div class="item-after">{{item.submit_time}}</div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media"><i class="icon icon-f7"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">修改</div>
                                    <div class="item-after">
                                        <a class="icon icon-edit pull-right " @click="edit_Station(item.id)" href="#"></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </template>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="js/vue.min.js"></script>
    </div>
    <script>
        var vm = new Vue({
            el: '#main_content',
            data: {
                StationInfo: new Array(),
                pageCount: 1,
                rowCount: 0,
                pageNo: 1,
                pageSize: 5,
                localurl: 'http://101.132.109.236:8081',
                searchText: ''
            },
            created: function () {
                this.loadinfo(this.pageNo)
            },
            methods: {
                outLogin: function () {
                    window.location = 'login.html';
                },
                openPic: function (id, Pic) {
                    var myPhotoBrowserStandalone = $.photoBrowser({
                        photos: [
                            'http://101.132.109.236/dpc/wwwroot/pictures_car/' + id + '_' + Pic,
                        ]
                    });
                    myPhotoBrowserStandalone.open();
                },
                add_Station: function () {
                    window.location = 'add_Station.html';
                },
                edit_Station: function (Station_id) {
                    window.location = 'edit_Station.html?Station_id=' + Station_id;
                },
                loadinfo: function (pageNo) {
                    var name = "";
                    var data = {};
                    var token = "";
                    if (localStorage.getItem("token")) {
                        token = localStorage.getItem("token");
                    }
                    else {
                        window.location = 'login.html';
                    }
                    var act = 'pageNo=' + pageNo || 1;
                    act += '&pageSize=' + this.pageSize || 5;
                    if (this.searchText) {
                        act += '&key=' + this.searchText;//模糊查询车主姓名，登记人姓名，车主手机号，身份证号，车架号，车牌，地址
                    }
                    $.ajax({
                        data: JSON.stringify(data),
                        dataType: "json",
                        url: '' + this.localurl + '/BaseStation/Query?' + act,//" + yewupath + "
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        xhrFields: {
                            withCredentials: true
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                for (var i = 0; i < data.rows.length; i++) {
                                    vm.StationInfo.push(data.rows[i]);
                                }
                                vm.pageCount = data.pageCount;
                            }
                        }
                    });
                },
            }
        })
        $(function () {
            'use strict';
            //下拉刷新页面
            $(document).on('refresh', '.pull-to-refresh-content', function (e) {
                vm.StationInfo.length = 0;//数组清空
                vm.pageNo = 1;//页面归回1
                vm.loadinfo(1);
                // 加载完毕需要重置
                $.pullToRefreshDone('.pull-to-refresh-content');
                //更新数据之后 判断是否开启上拉加载
                provideInfiniteScroll();
            });
            $(document).on('infinite', '.infinite-scroll-bottom', function () {
                vm.pageNo = vm.pageNo + 1;
                if (vm.pageNo <= vm.pageCount) {
                    vm.loadinfo(vm.pageNo);
                    //容器发生改变,如果是js滚动，需要刷新滚动
                    $.refreshScroller();
                }
                else {
                    $.toast("已无数据加载");
                    $('.infinite-scroll-preloader').hide();
                    //detachInfiniteScroll();
                }
            });

            //移除 上拉滚动事件监听 工作
            function detachInfiniteScroll() {
                $('.infinite-scroll-preloader').hide();
                $.detachInfiniteScroll($('#main_content'))
            }
            //判断是否应该开启上拉加载
            function provideInfiniteScroll() {
                //通过当前的列表容器的高度 与 窗口的高度做比对
                //并且要求 上拉功能之前未出现过 才会开启上拉
                var card_height = $('#container').attr('clientHeight');
                if (card_height >= window.innerHeight && $('.infinite-scroll-preloader').css('display') == 'none') {
                    $('.infinite-scroll-preloader').show();
                    $.attachInfiniteScroll($("#main_content"))
                } else {
                    $('.infinite-scroll-preloader').hide();
                    detachInfiniteScroll();
                }
            }
            $.init()
            //先取消掉 下拉无线再加功能
            detachInfiniteScroll();
        })
    </script>
</body>
</html>
